<script setup>
import { reactive } from 'vue';
import { listContract } from "@/api/le/contract";
import { getUser } from "@/api/system/user"

const props = defineProps({
  Lastfrom: {
    type: Object,
    required: true
  }
});

// console.log("解除合同信息", props.Lastfrom);

// 初始化 form，避免默认值覆盖
const form = reactive({
  releaseDate: '',
  agreementFile: null,
  oprater: null,
  user: {}
});

// console.log("老人id", props.Lastfrom.extraField2);

const formatDate = (dateStr) => {
  if (!dateStr) return ''; // 空值处理
  const date = new Date(dateStr); // 解析日期（兼容带时区的格式）
  // 获取年、月、日（月份从0开始，需+1）
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 补0确保两位数
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
// 获取合同信息
listContract({ elderlyId: props.Lastfrom.extraField2 }).then((response) => {
  const rows = response.rows || [];
  // console.log("合同信息", rows);
  // 用 some 查找第一个“生效中”的合同，找到后终止循环
  rows.some(row => {
    if (row.contractStatus == "已失效") {
      // 直接访问 row 的属性（修复 row[0] 错误）
      form.releaseDate = row.terminationTime || ''; // 容错：默认空字符串
      form.agreementFile = row.contractName || null;
      form.oprater = row.terminationSubmitter || null;
      // console.log("合同结果信息：",form);
      
      return true; // 终止循环
    }
    return false;
  });

  // 只有 oprater 存在时，才获取用户信息
  if (form.oprater) {
    getUser(form.oprater).then(userResponse => {
      form.user = userResponse.data || {}; // 容错：避免无数据时出错
    }).catch(err => {
      console.error("获取提交人信息失败：", err);
    });
  }
}).catch(err => {
  console.error("获取合同列表失败：", err);
});
</script>
<template>
  <el-card shadow="hover" class="release-record-card-card " style="width: 800px;margin-left: 30px;">
    <!-- 卡片头部 -->
    <div class="card-header">
      <h3>解除记录</h3>
    </div>
    
    <!-- 卡片内容 -->
    <div class="card-body">
      <div class="record-item">
        <span class="label">提交人</span>
        <span class="value">{{ form.user.nickName }}</span>
      </div>
      <div class="record-item">
        <span class="label">解除日期</span>
        <span class="value">{{ formatDate(form.releaseDate) }}</span>
      </div>
      <div class="record-item">
        <span class="label">解除协议</span>
        <span class="value">{{ form.agreementFile ? form.agreementFile : '高启强解除协议.pdf' }}</span>
        <!-- <a href="#" class="view-link" v-if="form.agreementFile">查看</a> -->
      </div>
    </div>
  </el-card>
</template>



<style scoped>
/* 卡片容器 */
.release-record-card {
  max-width: 600px;
  margin: 20px;
  border: 1px solid #e4e7ed; /* 卡片边框 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
  overflow: hidden; /* 防止内容溢出边框 */
  background-color: #fff; /* 卡片背景 */
}

/* 卡片头部 */
.card-header {
  padding: 12px 20px;
  background-color: #f5f7fa; /* 头部浅灰背景 */
  border-bottom: 1px solid #e4e7ed; /* 头部底部边框 */
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #333;
}

/* 卡片内容区 */
.card-body {
  padding: 20px;
}

/* 记录项样式 */
.record-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px; /* 增加项间距 */
}

.record-item:last-child {
  margin-bottom: 0; /* 最后一项去掉底部间距 */
}

.label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 12px;
  color: #666;
  font-size: 14px;
}

.value {
  flex: 1;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.view-link {
  color: #007bff;
  margin-left: 8px;
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
}

.view-link:hover {
  color: #0056b3; /*  hover效果 */
}
</style>